<template>
  <div>
    <div>
      <mt-header title="个人信息" style="background: linear-gradient(#000000, #035838);">
        <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
      </mt-header>
    </div>
    <div class="user-head">
      <mt-cell is-link @click.native="goNickname()">
        <span slot="title">昵 称：</span>
        <span>{{name}}</span>
      </mt-cell>
      <mt-cell is-link @click.native="goMobilephoneNumber()">
        <span slot="title">手 机 号：</span>
        <span>{{telephoneNumber}}</span>
      </mt-cell>
      <mt-cell is-link @click.native="goSex()">
        <span slot="title">性 别：</span>
        <span>{{sex}}</span>
      </mt-cell>
      <mt-cell is-link @click.native="open('picker1')">
        <span slot="title">出生日期：</span>
        <span>{{birthday}}</span>
      </mt-cell>

    </div>
    <div>
      <mt-datetime-picker ref="picker1" type="date" v-model="value1" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" :startDate="startDate" :endDate="endDate" @confirm="handleChange">
      </mt-datetime-picker>
    </div>
  </div>

</template>
<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import { format } from "../../common/js/formatDate";
export default {
  data() {
    return {
      name: "",
      telephoneNumber: "",
      sex: "",
      birthday: "",
      value: null,
      value1: null,
      startDate: new Date("1900-1-1"),
      endDate: new Date()
    };
  },
  props: {},
  watch: {},
  beforeCreate() {
    //console.group("beforeCreate 创建前状态===============》");
  },
  beforeMount() {
    //console.group("beforeMount 挂载前状态===============》");
  },
  mounted() {
    //console.group("mounted 挂载结束状态===============》");
    let global_members_id = JSON.parse(
      localStorage.getItem("global_members_id")
    );
    axios({
      method: "post",
      url: "/api/mygrxx/list.htm",
      params: {
        id: global_members_id
      }
    }).then(res => {
      res = res.data;
      if (res.zt === "true") {
        this.name = res.data.mc;
        this.telephoneNumber = res.data.telephone;
        if (res.data.sex === "0") {
          this.sex = "女";
        } else if (res.data.sex === "1") {
          this.sex = "男";
        } else if (res.data.sex === "2") {
          this.sex = "保密";
        }
        this.birthday = res.data.chushengriq;
        this.value1 = res.data.chushengriq;
      } else {
        Indicator.close();
        let instance = Toast({
          message: "加载失败"
        });
        setTimeout(() => {
          instance.close();
        }, 2000);
      }
    });
  },
  created() {
    // console.group("created 创建完毕状态===============》");
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  beforeUpdate() {
    // console.group("beforeUpdate 更新前状态===============》");
  },
  updated() {
    //console.group("updated 更新完成状态===============》");
  },
  beforeDestroy() {
    //console.group("beforeDestroy 销毁前状态===============》");
  },
  destroyed() {
    //console.group("destroyed 销毁完成状态===============》");
  },
  methods: {
    goBack() {
      this.$store.dispatch("showTabbar", { boolean: "0" });
      history.go(-1);
    },
    //调用日期选择器
    open(picker) {
      this.$refs[picker].open();
    },
    // 日期更新并保存方法
    handleChange(value) {
      let newbirthday = format(value, "yyyy-MM-dd");
      let global_members_id = JSON.parse(
        localStorage.getItem("global_members_id")
      );
      axios({
        method: "post",
        url: "/api/updategrxx/grxxbj.htm",
        params: {
          id: global_members_id,
          chushengriq: newbirthday
        }
      }).then(res => {
        res = res.data;
        if (res.zt === "true") {
          this.birthday = newbirthday;
        } else {
          Indicator.close();
          let instance = Toast({
            message: "更新失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    },
    // 去修改昵称页
    goNickname() {
      let nickname = this.name;
      this.$router.push({ path: "/nickname", query: { rq: nickname } });
    },
    // 去修改手机页
    goMobilephoneNumber() {
      let telephoneNumber = this.telephoneNumber;
      this.$router.push({
        path: "/mobilephoneNumber",
        query: { rq: telephoneNumber }
      });
    },
    // 去修改性别页
    goSex() {
      let sex = this.sex;
      this.$router.push({ path: "/sex", query: { rq: sex } });
    }
  }
};
</script>
<style scoped>

</style>